<template>
<span>
      <el-input v-if="props.item.type=='input'" 
          :size="props.item.size?props.item.size:'default'"
          :maxLength="props.item.maxLength ? props.item.maxLength : 50"
          spellcheck="false"
          :clearable="props.item.clearable ? props.item.clearable : true "
          :placeholder="props.item.placeholder ? props.item.placeholder : '' "
          :disabled="props.item.disabled ? props.item.disabled : false"
          :show-password="props.item.password ? props.item.password : false"
          @change="props.item.event && props.item.event.change? props.item.event.change(props.form) : null"
          v-model.trim="props.form[props.item.prop]">
      </el-input>
      <span v-if="props.item.type=='speInput' && props.form[props.item.prop]">
        <el-input  
          :size="props.item.size?props.item.size:'default'"
          :maxLength="props.item.maxLength ? props.item.maxLength : 50"
          :clearable="props.item.clearable ? props.item.clearable : true "
          spellcheck="false"
          :placeholder="props.item.placeholder ? props.item.placeholder : '请输入'+props.item.label "
          :disabled="props.item.disabled ? props.item.disabled : false"
          :show-password="props.item.password ? props.item.password : false"
          @change="props.item.event && props.item.event.change? props.item.event.change : null"
          v-model.trim="props.form[props.item.prop]">
        </el-input>
      </span>


      <span v-if="props.item.type == 'inputNumber'">
        <el-input-number
          v-model="props.form[props.item.prop]"
          :min="props.item.min||props.item.min===0 ? props.item.min : 0.001"
          :max="props.item.max ? props.item.max : 10000000"
          :clearable=" props.item.clearable ? props.item.clearable : true "
          :size="props.item.size ? props.item.size : 'default'"
          :disabled="props.item.disabled ? props.item.disabled : false"
          :style="props.item.style ? props.item.style : 'width:100%'"
          :precision="props.item.precision ? props.item.precision : props.item.precision===0?0:3"
          :placeholder="
            props.item.placeholder ?props.item.placeholder : ''
          "
        ></el-input-number>
        <span v-if="props.item.showSpanText" :style="props.item.textSpanStyle ? props.item.textSpanStyle : ''">{{props.item.showSpanText}}</span>
        <div v-if="props.item.showDivText" :style="props.item.textDivStyle ? props.item.textDivStyle : ''">{{props.item.showDivText}}</div>
        <span v-if="props.item.showTooltip" :style="props.item.toolTipStyle ? props.item.toolTipStyle : ''">
          <el-tooltip class="item" effect="dark" :content="props.item.toolTip"  placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
      </span>
      <span v-if="props.item.type == 'select'&&!props.item.hidden ">
          <ComSelect :item="props.item" :form.sync="props.form" :style="props.item.style?props.item.style:''" v-if="!props.item.hidden"/>
          <span v-if="props.item.showSpanText" :style="props.item.textSpanStyle ? props.item.textSpanStyle : ''">{{props.item.showSpanText}}</span>
          <div v-if="props.item.showDivText" :style="props.item.textDivStyle ? props.item.textDivStyle : ''">{{props.item.showDivText}}</div>
          <span v-if="props.item.showTooltip" :style="props.item.toolTipStyle ? props.item.toolTipStyle : ''">
            <el-tooltip class="item" effect="dark" :content="props.item.toolTip"  placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span> 
          <span v-if="props.item.rightBtn&&props.item.rightBtn.show">
            <el-button type="text" size="mini" @click="props.item.rightBtn.show?props.item.rightBtn.$events.btnClick(props.item,props.form):null">新增</el-button>
            <!-- <el-button type="primary" size="mini" click="alert('1212')">新增</el-button> -->
          </span>
      </span>
      <span v-if="props.item.type == 'cascader'">
          <ComCascader :item="props.item" :form="props.form" :style="props.item.style?props.item.style:'width:100%'"/>
      </span>
      <span v-if="props.item.type == 'cascader-input'">
          <ComCascader :item="props.item" :form="props.form" :style="props.form[props.item.prop]&&props.form[props.item.prop][0]==4?'width:50%':'width:100%'"/>
          <el-input 
            v-show="props.form[props.item.prop]&&props.form[props.item.prop][0]==4"
            :size="props.item.inputsize?props.item.inputsize:'default'"
            :maxLength="props.item.inputmaxLength ? props.item.inputmaxLength : 50"
            spellcheck="false"
            :placeholder="props.item.inputplaceholder ? props.item.inputplaceholder : '请输入'+props.item.label "
            :disabled="props.item.inputdisabled ? props.item.inputdisabled : false"
            :show-password="props.item.inputpassword ? props.item.inputpassword : false"
            @change="props.item.inputevent && props.item.inputevent.change? props.item.inputevent.change : null"
            style="width:49%"
            v-model.trim="props.form[props.item.inputprop]">
        </el-input>
      </span>
      <span v-if="props.item.type=='dateInterval'">
        <el-col :span="11">
            <el-date-picker type="date" 
              :size="props.item.size?props.item.size:'default'"
              :disabled="props.item.disabled ? props.item.disabled : false"
              :placeholder="props.item.placeholder ? props.item.placeholder : '选择日期' " 
              v-model="props.form[props.item.prop+'start_time']" 
              style="width: 100%;"/>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker 
              :size="props.item.size?props.item.size:'default'"
              :disabled="props.item.disabled ? props.item.disabled : false"
              :placeholder="props.item.placeholder ? props.item.placeholder : '选择日期' " 
              v-model="props.form[props.item.prop+'end_time']" 
              style="width: 100%;" />
        </el-col>
      </span>
      <!-- 条件项配置 -->
      <div v-if="props.item.type == 'conditions' ">
          <div style="height:100%;border:1px solid #DCDFE6;border-radius: 5px;margin-right:10px;">
              <Conditions :conditions="props.form[props.item.prop]">
                <span slot="footer"
                      slot-scope="data"
                      v-if="props.item.events"
                      style="opacity:0.6;font-size:10px;cursor:pointer;">
                  <span  @click="props.item.events.editBtn(data.index)">编辑</span>
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                  <span @click="props.item.events.deleteBtn(data.index)">删除</span>
                </span>
              </Conditions>
              <el-button type="primary" 
                v-if="props.item.events && props.item.events.editBtn"
                :size="props.item.size?props.item.size:'default'"
                style="float:right;margin-top:5px;"
                icon="el-icon-edit-outline" 
                @click="props.item.events.editBtn(-1)" plain/>
          </div>
      </div> 
      <span v-if="props.item.type=='switch'">
        <el-switch 
            :size="props.item.size?props.item.size:'default'"
            :style="props.item.style?props.item.style:'width:100%;padding:0px;'"
            :disabled="props.item.disabled ? props.item.disabled : false"
            v-model="props.form[props.item.prop]" 
            :active-text="props.item.active"
            :inactive-text="props.item.inactive" >
        </el-switch>  
      </span>
      <span v-if="props.item.type=='checkbox' || props.item.type=='checkbox-button'" style="float:left;">
          <ComCheckbox :item="props.item" :form="props.form" />
      </span>
      <span v-if="props.item.type=='text'" :style="props.item.style?props.item.style:''">
        <span v-if="props.item.showSpanText" :style="props.item.textSpanStyle ? props.item.textSpanStyle : ''">{{props.item.showSpanText}}</span>
        <div v-else-if="props.item.showDivText" :style="props.item.textDivStyle ? props.item.textDivStyle : ''">{{props.item.showDivText}}</div>
        <div v-else class="text">{{props.item.text}}</div>
      </span>
      <span v-if="props.item.type=='radio'|| props.item.type == 'radio-button'">
            <ComRadio :item="props.item" :form="props.form"/>
      </span> 
      <span v-if="props.item.type=='rate'">
        <el-rate
          :size="props.item.size?props.item.size:'default'"
          :show-text="props.item.showText ? props.item.showText : true"
          v-model="props.form[props.item.prop]" >
        </el-rate>
      </span>  
      <!-- <span  v-if="props.item.type=='signature'">
        <Signature :sign="props.form[props.item.prop]"></Signature> 
      </span>   
      <span v-if="props.item.type=='BrushSignature'">
        <BrushSignature :sign="props.form[props.item.prop]"></BrushSignature> 
      </span>   -->
      <span v-if="props.item.type=='textarea'">
          <el-input type="textarea" 
              :size="props.item.size?props.item.size:'default'"
              :disabled="props.item.disabled ? props.item.disabled : false"
              :clearable="props.item.clearable ? props.item.clearable : true "
              style="width:100%;padding:0px;"
              :maxLength="props.item.maxLength ? props.item.maxLength : 100"
              :rows="props.item.rows ? props.item.rows : 3"
              spellcheck="false"
              v-model.trim="props.form[props.item.prop]"></el-input>
      </span>  
      <!-- 日期 -->
      <span v-if="props.item.type=='date'">
          <el-date-picker
              v-model="props.form[props.item.prop]"
              :size="props.item.size?props.item.size:'default'"
              style="width:100%;padding:0px;"
              type="date"
              :format="props.item.format ? props.item.format : 'yyyy 年 MM 月 dd 日'"
              :value-format="props.item.valueFormat ? props.item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
              :disabled="props.item.disabled ? props.item.disabled : false"
              :placeholder="props.item.placeholder ? props.item.placeholder : '选择日期' ">
          </el-date-picker>    
      </span>
       <!--  带具体的事件的日期选择器  -->
       <span v-if="props.item.type=='dateTime'">
           <el-date-picker
                v-model="props.form[props.item.prop]"
                :size="props.item.size?props.item.size:'default'"
                style="width:100%;padding:0px;"
                type="datetime"
                :format="props.item.format?props.item.format:'yyyy-MM-dd HH:mm:ss'"
                :placeholder="props.item.placeholder ? props.item.placeholder : '选择日期' ">
            </el-date-picker>
       </span>
       <!--  时间范围选择器  -->
       <!-- <span v-if="props.item.type=='dateTimeRange'">
          <HsDatetimeRange :item="props.item" :form="props.form"/>
       </span> -->
       <!-- 上传图片 -->
       <!-- <span v-if="props.item.type=='uploadImg'">
              <HsUpload ref="HsUpload"  :modelVisable.sync="props.modelVisable" :defaultFile="props.form[props.item.prop]" @handleRemove="e=>props.form['handleRemove']=e"  @callback="e=>props.form['fileList']=e" :isCustomizeImg="props.isCustomizeImg"></HsUpload>
      </span>  -->
      <!-- <span v-if="props.item.type=='HsUploadMultiple'">
          <HsUploadMultiple ref="HsUpload" :disabled="props.item.isDisabled"  :modelVisable.sync="props.modelVisable" :applyImages="props.form[props.item.prop]" @handleRemove="e=>props.form['handleRemove']=e" @callback="e=>props.form['fileList']=e"></HsUploadMultiple>
      </span>  -->
      <!-- 省市区地址组件 -->
      <!-- <span v-if="props.item.type=='address'">
        <HsAddress ref="hsAddress" :item="props.props.item" :form.sync="props.form"/>
      </span>  -->
      <!-- text组件 -->
      <!-- <span v-if="props.item.type=='text'">
        <el-row :gutter="24">
          <el-col :span="props.item.span?props.item.span:24">
            {{props.item.prop}}
          </el-col>
        </el-row>
      </span>  -->
       <!-- 按钮配置 -->
      <!-- <ButtonsAdd v-if="props.item.type == 'btns'" :item="props.item" :form="props.form" /> -->

 </span>        

</template>
<script setup >
const props = defineProps({
  item :{
          required:true,
          type:Object,
      },
      form:{
          required:true,
          type:Object,
      },
      modelVisable: {
        type: Boolean,
        default:false,
      },
    isCustomizeImg: {
      type: Boolean,
      default:false,
    }
})


</script>
<style scoped>
.el-select{
  width:100%;
}
.el-form{
  font-size:10px;
  border-radius: 3px;
  transition: .2s;
  padding:25px;
} 
.el-form-item_label{
  font-size:7px;
}
.el-input__inner{
  display:block !important;
}
    
</style>





























